<template>
  <div class="employees">
    <pagetools :colshow="false" @opendig="opclick"></pagetools>
    <el-card class="mapop">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="name" type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="staffPhoto" label="头像" width="120">
          <template slot-scope="{ row }">
            <img
              class="img1"
              v-errimg="defaultimg"
              :src="row.staffPhoto"
              alt=""
              @click="showimg(row.staffPhoto)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="mobile" label="手机号"> </el-table-column>
        <el-table-column prop="workNumber" label="工号"> </el-table-column>
        <el-table-column label="聘用形式">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | myemployees }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门"> </el-table-column>
        <el-table-column prop="correctionTime" label="入职时间">
          <template slot-scope="{ row }">
            {{ row.correctionTime | timeformat }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="350">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              @click="$router.push({ path: '/detail', query: { id: row.id } })"
              >查看</el-button
            >
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="showclick(row.id)"
              >角色</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center; margin-top: 20px"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeclick"
        @current-change="currentclick"
      >
      </el-pagination>
    </el-card>
    <addpeo
      :digshow="digshow"
      @closedig="closedig"
      @submmit="yuangonglist"
    ></addpeo>
    <el-dialog title="扫码预览" :visible.sync="prevshow">
      <canvas ref="myCanvas" />
    </el-dialog>
    <el-dialog title="分配角色" :visible.sync="jueseshow">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in roleslist"
          :key="index"
          :label="item.id"
        >
          {{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="subrules" type="primary">提 交</el-button>
        <el-button @click="jueseshow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getyuanlist, userbatchinfo } from "../../api/employees";
import { getroleslist, setroleslist } from "../../api/juese";
import Qrcode from "qrcode";
export default {
  components: {
    addpeo: () => import("./components/addpeo.vue"),
  },
  data() {
    return {
      jueseshow: false,
      checkList: [],
      defaultimg:
        "https://img2.baidu.com/it/u=997198341,3864290766&fm=26&fmt=auto&gp=0.jpg",
      tableData: [],
      currentPage: 1,
      pageSizes: [3, 4, 5],
      pageSize: 3,
      total: 0,
      digshow: false,
      prevshow: false,
      roleslist: [],
      ruleid: "",
    };
  },
  methods: {
    async subrules() {
      await setroleslist({ roleIds: this.checkList, id: this.ruleid });
      this.$message.success("修改成功！");
      this.jueseshow = false;
    },
    showimg(val) {
      if (val) {
        this.prevshow = true;
        this.$nextTick(() => {
          Qrcode.toCanvas(this.$refs.myCanvas, val, {
            width: 150,
            height: 150,
          });
        });
      } else {
        this.$message.error("暂时没有图片");
      }
    },
    async showclick(val) {
      this.ruleid = val;
      let res = await userbatchinfo(val);
      this.checkList = res.roleIds;
      this.jueseshow = true;
    },
    currentclick(val) {
      this.currentPage = val;
      this.yuangonglist();
    },
    sizeclick(val) {
      this.pageSize = val;
      this.yuangonglist();
    },
    opclick() {
      this.digshow = true;
    },
    closedig() {
      this.digshow = false;
    },
    async yuangonglist() {
      let res = await getyuanlist({
        page: this.currentPage,
        size: this.pageSize,
      });
      this.total = res.total;
      this.tableData = res.rows;
    },
    async getrole() {
      let res = await getroleslist({
        page: this.currentPage,
        size: this.pageSize,
      });
      this.roleslist = res.rows;
    },
  },
  created() {
    this.yuangonglist();
    this.getrole();
  },
};
</script>

<style lang='scss'>
.mapop {
  margin-top: 20px;
  .img1 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
</style>